<template>
  <el-dialog title="设置页面权限点" custom-class="powerDialog" v-model="show" width="700px" :append-to-body="true"
             :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="pagePowerKey">
      <div class="pagePowerKey_top top">
        <div class="top_btn">
          <el-button size="small" icon="el-icon-plus" type="warning" v-on:click="dataList.push({label: null, key: null})">新增权限点</el-button>
        </div>
        <div class="top_ok">
          <el-button size="small" icon="el-icon-check" type="primary" v-on:click="onConfirm" v-loading="saveLoading">保存</el-button>
        </div>
      </div>
      <div class="pagePowerKey_table">
        <el-table border :data="dataList" height="40vh" :highlight-current-row="true">
          <el-table-column label="权限名">
            <template #default="scope">
              <el-input size="small" v-model="scope.row.label" placeholder="请输入权限名"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="权限key">
            <template #default="scope">
              <el-input size="small" v-model="scope.row.key" placeholder="请输入权限key"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80px">
            <template #default="scope">
              <el-button style="color: red;font-size: 12px" type="text"
                         v-on:click="dataList.splice(scope.$index, 1);">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  mixins: [],
  components: {},
  emits: ['reload'],
  data() {
    return {
      show: false,
      dataList: [],
      saveLoading: false,
      pageId: null
    }
  },
  props: {},
  setup() {
  },
  mounted() {
  },
  methods: {
    /**
     * 打开对话框
     */
    open(param = {}) {
      this.show = true
      this.pageId = param.id
      this.dataList = param.powerKeys || []
    },
    /**
     * 关闭对话框
     */
    close() {
      this.show = false
    },

    /**
     * 保存
     */
    onConfirm () {
      let self = this

      let hasError = this.dataList.find(item => {
        return !item.key || !item.label
      })
      if (hasError) {
        this.$message.error("请填写正确的权限信息")
        return
      }

      self.saveLoading = true
      self.callApi("setPagePowerKey", {
        id: this.pageId,
        powerKeys: this.dataList
      }).then(() => {
        self.saveLoading = false
        self.close()
      })
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.top {
  display: flex;
  min-height: 40px;
  align-items: center;
  flex-shrink: 0;
  flex-shrink: 0;

  .top_btn {
    flex: 1;
  }
  .top_ok{}
}
.pagePowerKey{

  .pagePowerKey_table {
    padding-top: 10px;
    :deep(input),
    :deep(.el-select) {
      width: 100%;
      border: 0;
      background: transparent !important;
    }
    :deep(.el-table__row .cell) {
      padding: 0;
    }
    :deep(td) {
      padding: 0 !important;
    }
  }
}
</style>
